API 串接實戰說明

使用物件模組概念，讀取個人的資料 API（必須使用 this 運行）並以列表呈現。

HTML

<div class="container">
  <h2>產品列表</h2>
  <div id="app" class="card-columns">
  </div>
</div>

JavaScript

var obj = {
	data: {
		uuid: '', //個人專屬的 uuid , 後端辨識用
		products: [],  //空陣列 , 之後塞資料
	},

	// 執行取得遠端資料
	getData: function () {
		var vm = this;  //現 this 指向全域
		var url = `https://course-ec-api.hexschool.io/api/${vm.data.uuid}/ec/products`;  
        //後台資料庫的網址

		axios.get(url) //透過 get 取得資料
			.then(function (response) {
				vm.data.products = response.data.data; //將取得的資料放入 products 的空陣列裡
				vm.render(); //呼叫 render 開始前台渲染動作
			})
	},

	// 前台渲染動作
	render: function () {
		var vm = this;
		var app = document.getElementById('app'); //指定html裡div的id
		var products = vm.data.products; //賦值到 products
		var str = '';
		products.forEach(function (item) { //跑迴圈 , 讓資料一筆一筆加上去
			str += `
                <div class="card">
                <img src="${ item.imageUrl[0]}" class="card-img-top">
                <div class="card-body">
                <h5 class="card-title">品名 : ${ item.title}</h5>
                <p class="card-text">介紹 : ${ item.content}</p>
                <p class="card-text">原價 : <del>${ item.origin_price}</del></p>
                <p class="card-text">特價 : ${ item.price}</p>
                </div>
                </div>`;
		});
		app.innerHTML = str; //寫入頁面
	}
}

obj.getData(); //執行取得遠端資料